<!-- 图像数据 -->
<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<view class="body">
				<view class="weather-area">
					<navigator
						:url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid"
						hover-class="none" class="change-btn">
						<view class="select-data f-s30" style="color: #000;">{{select_dev.name}}</view>
						<view class="iconfont f-s20" style="color: #000;">&#xe623;</view>
					</navigator>
					<!-- <template v-if="weatherLoading.loading">
						<view class="loading-box">
							<loading :loadingState="weatherLoading" icon="white"></loading>
						</view>
					</template>
					<template v-else>
						<view class="area">
							<view class="icon">
								<image src="@/static/images/area_icon.png" mode="widthFix"></image>
							</view>
							<view class="address ">{{weather_detail.address||'--'}}</view>
						</view>
						<view class="position-code">
							纬度：{{weather_detail.latitude||'--'}}，经度：{{weather_detail.longitude||'--'}}，海拔：{{weather_detail.altitude||'--'}}
						</view>
						<view class="temperature-data">{{(weather_detail.air_temperature||'-')+'℃'}}</view>
						<view class="data-wrap">
							<view class="item">
								<view class="icon">
									<image src="@/static/images/rang.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.rainfall||0)+'mm'}}</view>
									<view class="name">降雨量</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/soli.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.air_humidity||'-')+'%'}}</view>
									<view class="name">空气湿度</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/light.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.illuminance||'-')+'%'}}</view>
									<view class="name">光照度</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/qiyl.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.soil_temperature||'-')+'℃'}}</view>
									<view class="name">土壤温度</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/qiyl.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.soil_humidity||'-')+'%'}}</view>
									<view class="name">土壤湿度</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/wine_speed.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.wind_speed||'-')+'m/s'}}</view>
									<view class="name">风速</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<image src="@/static/images/wine_direction.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="val">{{(weather_detail.wind_direction||'-')+'Lus'}}</view>
									<view class="name">风向</view>
								</view>
							</view>
						</view>
					</template> -->

				</view>
				<view class="container">
					<view class="select-filter-bar">
						<view class="date-tab">
							<view :class="['item day',{'active':params.time==1}]" @click="changeTime(1)">日</view>
							<view :class="['item date',{'active':params.time==2}]" @click="changeTime(2)">周</view>
							<view :class="['item month',{'active':params.time==3}]" @click="changeTime(3)">月</view>
						</view>
						<!-- <view class="select-date-area">
							<view class="item">
								<picker mode="date" @change="changeDate($event,'weather',1)">
									<view class="item-wrap">
										<view class="select-name">{{params_weather.start_date||'开始日期'}}</view>
										<view class="icon">
											<image src="@/static/images/select_icon.png" mode="widthFix"></image>
										</view>
									</view>
								</picker>
							</view>
							<view class="item">
								<picker mode="date" @change="changeDate($event,'weather',2)">
									<view class="item-wrap">
										<view class="select-name">{{params_weather.over_date||'结束日期'}}</view>
										<view class="icon">
											<image src="@/static/images/select_icon.png" mode="widthFix"></image>
										</view>
									</view>
								</picker>
							</view>
						</view> -->
					</view>


					<template v-if="select_dev.type==0">
						<!-- 电量走势图 -->
						<view class="data-area">
							<view class="page__title">
								<view v-if="params.time==1" class="title">一日电量走势</view>
								<view v-if="params.time==2" class="title">一周电量走势</view>
								<view v-if="params.time==3" class="title">一月电量走势</view>
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.power">
										<uni-ec-canvas class="uni-ec-canvas" ref="power" canvas-id="power"
											:ec="ec.power" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>

						<!-- 信号强度 -->
						<view class="data-area">
							<view class="page__title">
								<view v-if="params.time==1" class="title">一日信号强度走势</view>
								<view v-if="params.time==2" class="title">一周信号强度走势</view>
								<view v-if="params.time==3" class="title">一月信号强度走势</view>
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.signal">
										<uni-ec-canvas class="uni-ec-canvas" ref="signal" canvas-id="signal"
											:ec="ec.signal" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>

						<view class="data-area">
							<view class="page__title">
								<view v-if="params.time==1" class="title">一日10cm含水量走势</view>
								<view v-if="params.time==2" class="title">一周10cm含水量走势</view>
								<view v-if="params.time==3" class="title">一月10cm含水量走势</view>
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.cm10_water">
										<uni-ec-canvas class="uni-ec-canvas" ref="cm10_water" canvas-id="cm10_water"
											:ec="ec.cm10_water" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>

						<!-- 20cm含水量走势 -->
						<view class="data-area">
							<view class="page__title">
								<view v-if="params.time==1" class="title">一日20cm含水量走势</view>
								<view v-if="params.time==2" class="title">一周20cm含水量走势</view>
								<view v-if="params.time==3" class="title">一月20cm含水量走势</view>
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.cm20_water">
										<uni-ec-canvas class="uni-ec-canvas" ref="cm20_water" canvas-id="cm20_water"
											:ec="ec.cm20_water" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>

						<!-- 30cm含水量走势 -->
						<view class="data-area">
							<view class="page__title">
								<view v-if="params.time==1" class="title">一日30cm含水量走势</view>
								<view v-if="params.time==2" class="title">一周30cm含水量走势</view>
								<view v-if="params.time==3" class="title">一月30cm含水量走势</view>
							</view>
							<view class="data-chart">
								<template v-if="dataTabUpdate.loading">
									<view class="loading-box">
										<loading :loadingState="dataTabUpdate"></loading>
									</view>
								</template>
								<template v-else>
									<template v-if="detail.cm30_water">
										<uni-ec-canvas class="uni-ec-canvas" ref="cm30_water" canvas-id="cm30_water"
											:ec="ec.cm30_water" :force-use-old-canvas="true">
										</uni-ec-canvas>
									</template>
									<template v-else>
										<view class="check-tips"><text>暂无统计数据</text></view>
									</template>
								</template>
							</view>
						</view>
					</template>

					<!-- 10cm温度走势 -->
					<view class="data-area">
						<view class="page__title">
							<view v-if="params.time==1" class="title">一日10cm温度走势</view>
							<view v-if="params.time==2" class="title">一周10cm温度走势</view>
							<view v-if="params.time==3" class="title">一月10cm温度走势</view>
						</view>
						<view class="data-chart">
							<template v-if="dataTabUpdate.loading">
								<view class="loading-box">
									<loading :loadingState="dataTabUpdate"></loading>
								</view>
							</template>
							<template v-else>
								<template v-if="detail.cm10_temperature">
									<uni-ec-canvas class="uni-ec-canvas" ref="cm10_temperature"
										canvas-id="cm10_temperature" :ec="ec.cm10_temperature" :force-use-old-canvas="true">
									</uni-ec-canvas>
								</template>
								<template v-else>
									<view class="check-tips"><text>暂无统计数据</text></view>
								</template>
							</template>
						</view>
					</view>

					<!-- 20cm温度走势 -->
					<view class="data-area">
						<view class="page__title">
							<view v-if="params.time==1" class="title">一日20cm温度走势</view>
							<view v-if="params.time==2" class="title">一周20cm温度走势</view>
							<view v-if="params.time==3" class="title">一月20cm温度走势</view>
						</view>
						<view class="data-chart">
							<template v-if="dataTabUpdate.loading">
								<view class="loading-box">
									<loading :loadingState="dataTabUpdate"></loading>
								</view>
							</template>
							<template v-else>
								<template v-if="detail.cm20_temperature">
									<uni-ec-canvas class="uni-ec-canvas" ref="cm20_temperature"
										canvas-id="cm20_temperature" :ec="ec.cm20_temperature" :force-use-old-canvas="true">
									</uni-ec-canvas>
								</template>
								<template v-else>
									<view class="check-tips"><text>暂无统计数据</text></view>
								</template>
							</template>
						</view>
					</view>

					<!-- 30cm温度走势 -->
					<view class="data-area">
						<view class="page__title">
							<view v-if="params.time==1" class="title">一日30cm温度走势</view>
							<view v-if="params.time==2" class="title">一周30cm温度走势</view>
							<view v-if="params.time==3" class="title">一月30cm温度走势</view>
						</view>
						<view class="data-chart">
							<template v-if="dataTabUpdate.loading">
								<view class="loading-box">
									<loading :loadingState="dataTabUpdate"></loading>
								</view>
							</template>
							<template v-else>
								<template v-if="detail.cm30_temperature">
									<uni-ec-canvas class="uni-ec-canvas" ref="cm30_temperature"
										canvas-id="cm30_temperature" :ec="ec.cm30_temperature" :force-use-old-canvas="true">
									</uni-ec-canvas>
								</template>
								<template v-else>
									<view class="check-tips"><text>暂无统计数据</text></view>
								</template>
							</template>
						</view>
					</view>

					<template v-if="select_dev.type==1">
						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日钾{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周钾{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月钾{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`K${it+1}`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`K${it+1}`"
												:canvas-id="`K${it+1}`" :ec="ec[`K${it+1}`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日氮{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周氮{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月氮{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`N${it+1}`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`N${it+1}`"
												:canvas-id="`N${it+1}`" :ec="ec[`N${it+1}`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日磷{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周磷{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月磷{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`P${it+1}`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`P${it+1}`"
												:canvas-id="`P${it+1}`" :ec="ec[`P${it+1}`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日电导率{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周电导率{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月电导率{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`cm${it+1}0_ec`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`cm${it+1}0_ec`"
												:canvas-id="`cm${it+1}0_ec`" :ec="ec[`cm${it+1}0_ec`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日土壤湿度{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周土壤湿度{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月土壤湿度{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`cm${it+1}0_humidity`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`cm${it+1}0_humidity`"
												:canvas-id="`cm${it+1}0_humidity`" :ec="ec[`cm${it+1}0_humidity`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

						<template v-for="it in 3">
							<view class="data-area" :key="it">
								<view class="page__title">
									<view v-if="params.time==1" class="title">一日PH{{it+1}}走势</view>
									<view v-if="params.time==2" class="title">一周PH{{it+1}}走势</view>
									<view v-if="params.time==3" class="title">一月PH{{it+1}}走势</view>
								</view>
								<view class="data-chart">
									<template v-if="dataTabUpdate.loading">
										<view class="loading-box">
											<loading :loadingState="dataTabUpdate"></loading>
										</view>
									</template>
									<template v-else>
										<template v-if="detail[`cm${it+1}0_ph`]">
											<uni-ec-canvas class="uni-ec-canvas" :ref="`cm${it+1}0_ph`"
												:canvas-id="`cm${it+1}0_ph`" :ec="ec[`cm${it+1}0_ph`]" :force-use-old-canvas="true">
											</uni-ec-canvas>
										</template>
										<template v-else>
											<view class="check-tips"><text>暂无统计数据</text></view>
										</template>
									</template>
								</view>
							</view>
						</template>

					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import laydate from '@/components/laydate.vue'
	import empty from '@/components/empty.vue'
	import uniEcCanvas from '@/components/uni-ec-canvas.vue'
	import * as echarts from '@/common/echart/echarts.js'
	let chart = null
	export default {
		name: 'name',
		data() {
			return {
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				isIphoneX: getApp().globalData.isIphoneX,
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				dataTabUpdate: {
					loading: true
				},
				weatherLoading: {
					loading: true
				},
				dev_type: '',
				detail: {},
				weather_detail: {},
				params: {
					time: 1,
					start_date: '',
					over_date: '',
				},
				echart_option: {},
				select_dev: {
					name: '',
					id: '',
					typeid: '',
					update: false,
					type: ''
				},
				ec: {},
				times: ['一日', '一周', '一月']
			}
		},
		async onLoad(params) {
			this.dev_type = params.dev_type;
			this.select_dev.id = params.dev_id;
			this.select_dev.name = params.dev_name;
			this.select_dev.type = params.type

			if (params.typeid) {
				this.select_dev.typeid = params.typeid;
			}

			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					//////this.getXingYouWeather();
					this.dataTabUpdate.loading = true;
					this.detail = await this.getSqChart();
					if (this.detail) {
						this.setChart();
					}
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}

		},
		async onShow() {

			// 登录状态更新
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				//////this.getXingYouWeather();
				this.detail = await this.getSqChart();
				if (this.detail) {
					this.setChart();
				}
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}

			// 设备切换
			if (this.select_dev.update) {
				this.dataInit();
				//////this.getXingYouWeather();
				this.detail = await this.getSqChart();
				if (this.detail) {
					this.setChart();
				}
				this.select_dev.update = false;
			}


		},
		methods: {

			dataInit: function() {
				this.params.page = 0;
				this.loadingState.default = false;
				this.loadingState.loading = true;
				this.loadingState.completed = false;
				this.dataTabUpdate.loading = true;
			},

			// 初始化echart图表
			initChart: function(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				return chart
				// chart.setOption(option)
			},

			// 最新气象数据
			getXingYouWeather: async function() {
				let res = await this.$api.tool_api.getXingYouWeather({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.select_dev.id
				})
				if (res.data.ret == 1000) {
					this.weatherLoading.loading = false;
					this.weather_detail = res.data.data;
				} else {
					this.weatherLoading.loading = false;
				}
			},

			// 气象走势数据
			getSqChart: async function() {
				let res = await this.$api.tool_api.getSqChart({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.select_dev.id,
					// start_date: this.params.start_date,
					// over_date: this.params.over_date,
					dtype: this.params.time,
					type: this.select_dev.type
				})
				console.log("res", res)
				if (res.data.ret == 1000) {
					this.dataTabUpdate.loading = false;
					return res.data.data
				} else {
					this.dataTabUpdate.loading = false;
					return false
				}
			},

			// 切换时间
			changeTime: async function(type) {
				if (this.params.time == type) {
					return
				} else {
					Object.assign(this.ec, this.$options.data().ec)

					this.params.time = type;
					this.dataTabUpdate.loading = true;
					this.detail = await this.getSqChart();
					if (this.detail) {
						this.setChart();
					}
				}
			},

			// 设置图表
			setChart: function() {
				// 电量echart配置
				if (this.detail.power) {
					let option = this.setEchartOption(this.detail.datelist, this.detail.power);
					this.$set(this.ec, 'power', { option, lazyLoad: false })
				}

				// 信号强度
				if (this.detail.signal) {
					let option = this.setEchartOption(this.detail.datelist, this.detail.signal);
					this.$set(this.ec, 'signal', { option, lazyLoad: false })
				}

				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_water`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_water`]);
						this.$set(this.ec, `cm${i}0_water`, { option, lazyLoad: false })
					}
				}

				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_temperature`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_temperature`]);
						this.$set(this.ec, `cm${i}0_temperature`, { option, lazyLoad: false })
					}
				}

				//k1k2k3
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`K${i}`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`K${i}`]);
						this.$set(this.ec, `K${i}`, { option, lazyLoad: false })
					}
				}

				//N!N2N3
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`N${i}`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`N${i}`]);
						this.$set(this.ec, `N${i}`, { option, lazyLoad: false })
					}
				}

				//P
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`P${i}`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`P${i}`]);
						this.$set(this.ec, `P${i}`, { option, lazyLoad: false })
					}
				}

				// cm10ec
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_ec`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_ec`]);
						this.$set(this.ec, `cm${i}0_ec`, { option, lazyLoad: false })
					}
				}

				// cm10_humidity
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_humidity`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_humidity`]);
						this.$set(this.ec, `cm${i}0_humidity`, { option, lazyLoad: false })
					}
				}

				// cm20_ph
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_ph`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_ph`]);
						this.$set(this.ec, `cm${i}0_ph`, { option, lazyLoad: false })
					}
				}

				// cm30_ec
				for (let i = 1; i <= 3; i++) {
					if (this.detail[`cm${i}0_ec`]) {
						let option = this.setEchartOption(this.detail.datelist, this.detail[`cm${i}0_ec`]);
						this.$set(this.ec, `cm${i}0_ec`, { option, lazyLoad: false })
					}
				}
				console.log(this.ec);

			},

			// 设置图表配置
			setEchartOption: function(xdata, ydata) {
				let interval = 0;
				if (xdata.length > 16) {
					interval = 1
				}
				let option = {
					grid: {
						x: 40,
						y: 20,
						x2: 20,
						y2: 40,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
						}
					},
					xAxis: {
						type: 'category',
						data: xdata,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000'
							},
							interval: interval,
							rotate: 45, //倾斜度 -90 至 90 默认为0
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
							}
						},
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#000', //边线的颜色
								width: '1' //坐标线的宽度
							}
						},
					},
					series: [{
						name: '',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#09f',
									width: 1
								}
							}
						},
						smooth: true,
						data: ydata
					}]
				}

				return option
			},
		},
		components: {
			loading,
			laydate,
			empty,
			uniEcCanvas
		},
		computed: {

		},
		watch: {


		}

	}
</script>

<style lang="less">
	page {
		background: #f5f5f5;
	}

	.page__title {
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.data-area {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		background: #fff;
		// height: 450rpx;

		.title {
			padding: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.data-chart {
			height: 450rpx;

			.loading-box {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.check-tips {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.weather-area {
		background-color: #fff;

		// min-height: 780rpx;
		// background: url(../../static/images/weather_bg.png) no-repeat;
		// background-size: cover ;
		.loading-box {
			height: 500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.change-btn {
		color: #fff;

		.iconfont {
			color: #fff
		}
	}

	.area {
		display: flex;
		justify-content: center;
		padding: 30rpx 0 10rpx;
		font-size: 30rpx;
		color: #fff;

		.icon {
			width: 30rpx;
			height: 30rpx;
			flex-shrink: 0;
			margin-right: 20rpx;

			image {
				width: 100%;
			}
		}

		.address {
			max-width: 80%;
		}
	}

	.position-code {
		margin-bottom: 40rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}

	.temperature-data {
		margin-bottom: 50rpx;
		text-align: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #fff;
	}

	.data-wrap {
		display: flex;
		flex-wrap: wrap;
		margin: 0 10rpx;

		.item {
			display: flex;
			width: 30.3%;
			padding-left: 3%;
			margin-bottom: 50rpx;

			.icon {
				display: flex;
				flex-shrink: 0;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;

				image {
					width: 70%
				}
			}

			.info {
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.select-filter-bar {
		display: flex;
		justify-content: center;
		// margin: 40rpx 10rpx 20rpx;
	}

	.date-tab {
		display: flex;
		flex-shrink: 0;
		margin: 20rpx auto;
		width: 250rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 15rpx;
		border: 1rpx solid #1199FE;
		background: #fff;
	}

	.date-tab .item {
		flex-grow: 1;
		width: 1%;
		flex-shrink: 0;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.date-tab .month.active {
		background: #1199FE;
		border-top-right-radius: 13rpx;
		border-bottom-right-radius: 13rpx;
		color: #fff;
	}

	.date-tab .date.active {
		background: #1199FE;
		color: #fff;
	}

	.date-tab .day.active {
		background: #1199FE;
		border-top-left-radius: 13rpx;
		border-bottom-left-radius: 13rpx;
		color: #fff;
	}
</style>